  <!-- 支付方式 -->
<template>
    <el-form :model="form" label-width="auto" style="max-width: 600px;margin: 0 auto;">
        <el-form-item label="支付类型：">
            <el-radio-group v-model="form.payType" >
                <el-radio :value="1">
                    <img src="../assets/img/wxzf.png" alt="" srcset="">
                </el-radio>
                <el-radio :value="2">
                    <img src="../assets/img/zfbzf.png" alt="" srcset="">
                </el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="支付金额：">
            <div class="text-left">{{ props.examParam.amount }}元</div>
        </el-form-item>
        <!-- <el-form-item>
            <el-button type="primary" @click="onSubmit">确认支付</el-button>
        </el-form-item> -->
    </el-form>

    <el-dialog v-model="dialog" title="请使用扫码支付" @close="closeDialog" close-on-click-modal="false" width="350px">
        <div class="img">
            <img :src="payCodeModel.codeUrl" alt="" srcset=""/>

        </div>
    </el-dialog>

</template>
<script setup lang="ts">
import type {ExamParam,PayCodeModel,PayParam} from "@/api/person/exam"
import  {payApi} from '@/api/person/exam'
const emit =defineEmits(['paySuccess'])
 interface formValue {
    payType: string
}
let form = ref<formValue>({
    payType: "",
})
const payParam=ref<PayParam>({projectId:'',showingsId:'',levelId:'',city:'',amount:'',payType:'',courseIds:''})
const payCodeModel=ref<PayCodeModel>({orderNo:'',codeUrl:''})
const dialog=ref(false)
async function payType(record:PayParam){
    console.log(record,'record')
    if(form.value.payType===''){
        ElMessage.error('请选择支付方式')
        return false
    }
    payParam.value=record
    payParam.value.payType=form.value.payType
    const response=await payApi(payParam.value)
    if(response.code===200){
        dialog.value=true
        payCodeModel.value=response.data??{orderNo:'',codeUrl:''}
        createWebSocket(payCodeModel.value.orderNo)
    }else{
        ElMessage.error(response.msg)
    }
}
defineExpose({
    payType
})
interface Props {
    examParam: ExamParam
}
const props=defineProps<Props>()

function createWebSocket(orderNo:string){
    const websocket = new WebSocket(process.env.VUE_APP_BASE_API+'paySocket/'+orderNo);
    websocket.onopen = function () {
    console.log('连接成功')
    }
    websocket.onmessage = function (e){
          console.log(e.data)
          const res=e.data
          if(res==='success'){
            ElMessage.success('支付成功')
            websocket.close()
            dialog.value=true
            emit('paySuccess')
          }else{
            ElMessage.success('支付失败')
          }

    }

}
function closeDialog(){
    dialog.value=false
}
</script>
<style scoped lang='less'>
.text-left {
    width: 100%;
    text-align: left;
}

.el-radio-group {
    width: 100%;
}
.img{
    display: flex;
    justify-content: center
}
img {
    width: 126px;

}
</style>
